import React, { useEffect, useState } from "react";
import { NavBar, Space, InfiniteScroll } from 'antd-mobile'
import { useSearchParams,useNavigate } from "react-router-dom";
import './index.css'
import request from '../../api/request'
function Index() {
const navigate=useNavigate()
  const [type] = useSearchParams();
  const start = type.get("start");
  const end = type.get("end");
  const [page,setpage]=useState(1)
  const [list,setlist]=useState([])
   const [hasMore, setHasMore] = useState(true)
  const getdata=async()=>{
    const res=await request.get('/api/trip/airplane',{
        params:{
            start,
            end,
            page
            
        }
    })
    console.log(res);
    setpage(page+1)
    if(res.data.code===200){
        setlist([...list,...res.data.data])
    }
    if(res.data.data.length===0){
        setHasMore(false)
    }
    
    
  }
   const hanToXiangqing=(item)=>{
     navigate('/xiangqing',{state:item})
  }
  useEffect(()=>{
    getdata()
  },[])
 
  return <div>
     <NavBar onBack={()=>navigate('/')}>
        <div className="www">
           <div className="aaa"> 
             <span>{start}</span>
            <span> ➡ </span>
            <span>{end}</span>
           </div>
           <div className="ccc">
            <span>前一天</span>
             <span> 6/17 周二</span>
              <span>后一天</span>
           </div>
        </div>
     </NavBar>
     <div>
        {
            list.length>0&&list.map((item,index)=>{
                return <div key={index} className="box" onClick={()=>hanToXiangqing(item)}>
                     <div className="left">
                        <div>
                            <p>{item.dst}</p>
                            <p>{item.aat}</p>
                            <p>{item.ast}</p>
                        </div>
                        <div>
                            <p>{item.dasn}</p>
                            <p>{item.td}</p>
                            <p>{item.aasn}</p>
                        </div>
                        <div>
                            <p>二等座 {item.it==1?'有票':`${item.it}张`}</p>
                            <p>一等座 {item.it==1?'有票':`${item.it}张`}</p>
                            <p>特等座 {item.it==1?'有票':`${item.it}张`}</p>
                        </div>
                     </div>
                     <div className="regit">
                        <p>{item.lps[0].sp}￥</p>
                     </div>
                </div>
            })
        }
        <div  className="box1">
                     <div className="left1">
                        <div className="fu1">
                            <p className="pox">车次已售完可抢票</p>
                        </div>
                        <div>
                            <p>20:03</p>
                            <p>D3212</p>
                            <p>21:03</p>
                        </div>
                        <div>
                            <p>北京西</p>
                            <p>1h 12m</p>
                            <p>三亚</p>
                        </div>
                        
                     </div>
                     <div className="regit1">
                        <p>抢</p>
                     </div>
                </div>
                <div  className="box1">
                     <div className="left1">
                        <div className="fu1">
                            <p className="pox">车次已售完可抢票</p>
                        </div>
                        <div>
                            <p>20:03</p>
                            <p>D3212</p>
                            <p>21:03</p>
                        </div>
                        <div>
                            <p>北京西</p>
                            <p>1h 12m</p>
                            <p>三亚</p>
                        </div>
                        
                     </div>
                     <div className="regit1">
                        <p>抢</p>
                     </div>
                </div>
     </div>
     
     <InfiniteScroll loadMore={getdata} hasMore={hasMore} />
  </div>;
}

export default Index;
